// 封装全部代码
function hotDog(){

// 封装游戏过程的所有代码
function startGame(){

    // 一、确定王思聪在底部固定范围移动
    // 步骤：
    // 1、获取网页绑定鼠标移动事件
    var wscObj = document.querySelector('.wsc')
    document.onmousemove = function(evt){
        // 2、事件处理函数中---获取事件对象
        var e = evt || window.event
        // 3、事件处理函数中---周边样式：定位（写过了就不用写）、宽度(需要限制边界)
        var maxW = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
        var left = e.clientX - wscObj.offsetWidth/2      // 确定鼠标位置在图片中间
        var maxH = (window.innerHeight || document.documentElement.clientHeight) - wscObj.offsetHeight
        if( left < 0 ) left = 0
        if( left > maxW ) left = maxW
        wscObj.style.left = left  + 'px'
        wscObj.style.top = maxH  + 'px'
    }
    
    
    // 二、每隔0.5秒网页上方随机出现食物
    // 步骤：
    // 1、封装随机函数
    function random(max,min){
        return Math.floor( Math.random() * (max-min+1)+min )
    }
    // 2、写定时器
    t1 = setInterval(function(){
        // 3、定时器中---造img标签
        var imgObj = document.createElement('img')
        // 4、获取随机的冠军和热狗
        if(random(0,9)==4 || random(0,9)==6){
            imgObj.src = './img/guanjun.jpg'
            imgObj.className = 'champion'
        } else {
            imgObj.src = './img/hotdog.jpg'
            imgObj.className = 'hotdog'
        }
        // 5、定时器中---周边样式：定位、宽度(需要限制边界)
        imgObj.style.position = 'absolute'
        imgObj.style.top = 0
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
        imgObj.style.left = random(0,maxLeft) + 'px'
        imgObj.style.width = '30px'
        imgObj.style.height = '50px'
    
        // 6、将热狗和冠军追加到页面中
        document.body.appendChild(imgObj)
    },500)
    
    
    // 三、食物掉落效果
    // 步骤：
    var grade = 0
    // 1、写定时器食物每隔10毫秒下落
    t2 = setInterval(function(){
        // 2、定时器中---遍历所有的食物
        var foodObjs = document.querySelectorAll('.champion,.hotdog')
        foodObjs.forEach(function(item,i){
            // 3、定时器中---先获取所有食物的top值为num变量，定时器里面num++，再修改所有食物的top值
            var num = parseInt(item.style.top)
            num++
            item.style.top = num + 'px'
            // 4、限制食物的边界（高度）
            var maxH = window.innerHeight || document.documentElement.clientHeight
            if(parseInt(item.style.top) > maxH) document.body.removeChild(item)
            
    
            // 四、判断王思聪的位置和食物的位置，吃到了就加分
            // 思路：食物的top值必须要大于等于王思聪的top值，而且食物的left值必须大于等于王思聪的left值，小于等于王思聪的left加上王思聪自身的宽度   ==>   这样食物才能掉到王思聪的嘴里
            // 步骤：
            // 1、确定食物的left和top
            var foodX = parseInt(item.style.left)
            var foodY = parseInt(item.style.top)
            // 2、确定王思聪的left和top
            var wscX = parseInt(wscObj.style.left)
            var wscY = parseInt(wscObj.style.top)
            // 3、判断食物的位置是否在王思聪里面
            if(foodX > wscX  &&  foodX < wscX + wscObj.offsetWidth  &&  foodY > wscY){
                // 4、判断吃的是热狗还是冠军杯
                if(item.className == 'hotdog'){
                    grade++
                    part = 1
                    document.querySelector('.grade').innerText = '分数：' + grade + '分'
                    document.querySelector('.bonus').innerText = '+' + part
                    document.body.removeChild(item)
                } else if (item.className == 'champion'){
                    grade += 10
                    part = 10
                    document.querySelector('.grade').innerText = '分数：' + grade + '分'
                    document.querySelector('.bonus').innerText = '+' + part
                    document.body.removeChild(item)
                }
            }
        })
    },1)
    
    
    // 五、剩余时间倒计时结束清除效果
    // 步骤：
    var times = 10
    // 1、写定时器
    t3 = setInterval(function(){
        // 2、获取剩余时间标签，修改里面秒数
        var remainTimeObj = document.querySelector('.remain_time')
        times--
        remainTimeObj.innerText = '剩余时间：' + times + '秒'
        // 3、时间结束停止所有定时器，弹出游戏结束框
        if(times == 0){
            clearInterval(t1)
            clearInterval(t2)
            clearInterval(t3)
            document.querySelector('.play_panel').style.display = 'block'
            var foodObjs = document.querySelectorAll('.champion,.hotdog')
            foodObjs.forEach(function(item){
                document.body.removeChild(item)
            })
            document.querySelector('.bonus').innerText = ''
            document.querySelector('.score').innerText = grade + '分'
        }
    },1000)
    
    }
    
    startGame()
    
    
    // 六、点击重新开始按钮即重新开始游戏
    // 步骤：获取重新开始按钮，绑定点击事件,封装以上游戏的所有代码，然后调用
    var btnObj = document.querySelector('.start button')
    btnObj.onclick = function(){
        startGame()
        document.querySelector('.play_panel').style.display = 'none'
    }
    
}



